<template>
    <el-card>
      <el-form :model="addForm">
        <el-form-item label="会员卡名称">
          <el-input v-model="addForm.MembershipCardName"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addForm.Price"></el-input>
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input v-model="addForm.DescribeInfo"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.note"></el-input>
        </el-form-item>
        <el-form-item label="会员卡类型">
          <el-select v-model="addForm.Cardtype">
            <el-option label="无期限" value="1"></el-option>
            <el-option label="有期限" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支持课程">
          <el-table :data="addForm.classes" border style="width:100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="className" label="课程名称" width="150" />
            <el-table-column label="收费">
              <template v-slot="scope">
                <el-input v-model="scope.row.charge" size="mini" placeholder="收费人次"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="goBack">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { submitEditForm } from "../../api/MembershipCard"

  const router = useRouter();
  const addForm = ref({
    MembershipCardName: "",
    Price: "",
    DescribeInfo: "",
    note: "",
    Cardtype: "",
    classes: [
      { className: "课程A", charge: 0 },
      { className: "课程B", charge: 0 },
      { className: "课程C", charge: 0 }
    ]
  });
  
  const goBack = () => {
    router.back();
  };
  
  const submitAdd = () => {
    submitEditForm(addForm).then(res => {
    if (res.data.code === 200) {
      ElMessage({
      type: 'success',
      message: '信息添加成功'
    });
     router.back();
    }
  })
  .catch(error => {
    console.error('Error:', error);
    alert('error');
  })
};
  </script>
  
  <style scoped>

  .dialog-footer {
    text-align: right;
    margin-top: 20px;
  }
  </style>
  